<template>
    <div class="btn">
        <button @click="backHandler">返回</button>
    </div>
    <h3>统计图表模板展示</h3>
    <el-row>
        <div ref="lineRef"></div>
    </el-row>
</template>

<script lang='ts' setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import { ref } from 'vue';
import { reactive } from 'vue';
import { useNewOrdersStore } from '@/stores/NewOrdersStore';
import type { IOderPlans } from '@/stores/NewOrdersStore';
import { useNewOrdersStore0 } from '@/stores/NewOrdersStore';
import type { IOderPlans0 } from '@/stores/NewOrdersStore';
import router from '@/router';
const newOrdersStore = useNewOrdersStore();
const newOrdersStore0 = useNewOrdersStore0();


type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
const lineRef = ref();
onMounted(() => {
    // const formData = reactive({ ...newOrdersStore.orderPlans[0] })
    console.log(lineRef.value)
    const myChart = echarts.init(lineRef.value);
    const option: EChartsOption =
    {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#e74c3c'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['实际采收量', '计划采收量', '温度'],
            textStyle: {
                color: 'white'
            }
        },
        xAxis: [
            {
                type: 'category',
                data: newOrdersStore.orderPlans.map(item => item.pa).filter((pa): pa is number => pa !== null),
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    color: 'white' // 你想要的颜色
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '采收量',
                min: 1000,
                max: 10000,
                interval: 1670,
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)' // 白色，20%透明度
                    }
                },
                axisLabel: {
                    formatter: '{value}公斤',
                    color: 'white'
                },

                nameTextStyle: {
                    color: 'white' // Y轴标题“采收量”颜色
                }

            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C',
                    color: 'white'
                },
                nameTextStyle: {
                    color: 'white' // Y轴标题“采收量”颜色
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                }
            }
        ],
        series: [
            {
                name: '实际采收量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number) + ' ml';
                    }
                },
                data: newOrdersStore0.orderPlans0
                    .map(item => typeof item.re === 'string' ? Number(item.re.replace('公斤', '')) : item.re)
                    .filter((re): re is number => typeof re === 'number' && !isNaN(re))
            },
            {
                name: '计划采收量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number);
                    }
                },
                data: newOrdersStore.orderPlans
                    .map(item => typeof item.pe === 'string' ? Number(item.pe.replace('公斤', '')) : item.pe)
                    .filter((pe): pe is number => typeof pe === 'number' && !isNaN(pe))
            },
            {
                name: '温度',
                type: 'line',
                yAxisIndex: 1,
                color: '#e74c3c',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number) + ' °C';
                    }
                },
                data: [2.0, 24.0, 12.1, 20.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };
    option && myChart.setOption(option);
})

const backHandler = () => {

    // currentView.value = 'planlist';
    newOrdersStore.xs = true;
    router.push('/orders');

}
</script>

<style lang='scss' scoped>
div {
    width: 100%;
    height: 400px;
}

h3 {
    width: 100%;
    text-align: center;
    color: white;
}

.btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;

    button {
        cursor: pointer;
        background-color: #368B90;
        color: white;
        width: 85px;
        height: 40px;
        border: 0;
        border-radius: 4px;
    }
}
</style>